﻿@model RibbonModel
@using Nop.Plugin.Widgets.Ribbon;
@using Nop.Plugin.Widgets.Ribbon.Models;
@using Nop.Services.Events;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework;
@using Nop.Web.Framework.Events;
@using Nop.Web.Framework.UI;

@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.Id)

@{
    //CSS resources
    Html.AppendCssFileParts("~/plugins/Widgets.Ribbon/content/wrap-ribbon.css");
}

<div id="ribbon-edit">
    <ul>
        <li @Html.RenderSelectedTabIndex(0, GetSelectedTabIndex())>
            @T("Plugins.Widgets.Ribbon.Info")
        </li>
        <li @Html.RenderSelectedTabIndex(1, GetSelectedTabIndex())>
            @T("Plugins.Widgets.Ribbon.Products")
        </li>
    </ul>
    <div>
        @TabInfo()
    </div>
    <div>
        @TabProducts()
    </div>

</div>
<script>
    $(document).ready(function () {
        $("#ribbon-edit").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            },
            select: tabstrip_on_tab_select
        });
    });
</script>

@{
    //custom tabs
    var eventMessage = new AdminTabStripCreated(this.Html, "ribbon-edit");
    EngineContext.Current.Resolve<IEventPublisher>().Publish(eventMessage);
    foreach (var eventBlock in eventMessage.BlocksToRender)
    {
        @eventBlock
    }
}
<script>
    $(document).ready(function () {
        $("#colorRed").click(function () { $("#RibbonColor").val('lred'); });
        $("#colorBlue").click(function () { $("#RibbonColor").val('lblue'); });
        $("#colorGreen").click(function () { $("#RibbonColor").val('lgreen'); });
        $("#colorYellow").click(function () { $("#RibbonColor").val('lyellow'); });

        $("#block1").click(function () { $("#RibbonClass").val('wrap-ribbon left-corner'); });
        $("#block2").click(function () { $("#RibbonClass").val('wrap-ribbon right-corner'); });
        $("#block3").click(function () { $("#RibbonClass").val('wrap-ribbon left-corner strip'); });
        $("#block4").click(function () { $("#RibbonClass").val('wrap-ribbon right-corner strip'); });
        $("#block5").click(function () { $("#RibbonClass").val('wrap-ribbon left-edge point'); });
        $("#block6").click(function () { $("#RibbonClass").val('wrap-ribbon right-edge point'); });
        $("#block7").click(function () { $("#RibbonClass").val('wrap-ribbon left-edge stitch point'); });
        $("#block8").click(function () { $("#RibbonClass").val('wrap-ribbon right-edge stitch point'); });
        $("#block9").click(function () { $("#RibbonClass").val('wrap-ribbon left-edge fork '); });
        $("#block10").click(function () { $("#RibbonClass").val('wrap-ribbon right-edge fork '); });
        $("#block11").click(function () { $("#RibbonClass").val('wrap-ribbon left-edge fork stitch'); });
        $("#block12").click(function () { $("#RibbonClass").val('wrap-ribbon right-edge fork stitch'); });

        var $ribbonColorText = $("#RibbonColor");
        var $ribbonClassText = $("#RibbonClass");
        var $ribbonText = $("#Text");

        $ribbonColorText.data("value", $ribbonColorText.val());
        $ribbonClassText.data("value", $ribbonClassText.val());
        $ribbonText.data("value", $ribbonText.val());

        setInterval(function () {
            var data = $ribbonColorText.data("value"),
                val = $ribbonColorText.val();
            var dataClass = $ribbonClassText.data("value"),
                valClass = $ribbonClassText.val();
            var dataText = $ribbonText.data("value"),
                valText = $ribbonText.val();

            if (data !== val || dataClass !== valClass || dataText !== valText) {
                $ribbonColorText.data("value", val);
                $ribbonClassText.data("value", valClass);
                $ribbonText.data("value", valText);

                $("#spanText").text($ribbonText.val());
                $("#ribbon-sample").removeClass();
                $("#ribbon-sample").addClass($ribbonClassText.val() + " " + $ribbonColorText.val());
            }
        }, 100);
    });
</script>
<style> 
    .ribbon-colors {
        float: left;
        margin: 10px 10px 10px 0;
    }

        .ribbon-colors span {
            padding: 10px;
            color: #fff;
            border: solid 1px #000;
            cursor: pointer;
        }

        .ribbon-colors:after {
            clear: both;
        }
        .ribbon-sample{width:250px; height:170px;}
</style>

@*save selected tab index*@
<input type="hidden" id="selected-tab-index" name="selected-tab-index" value="@(GetSelectedTabIndex())">


@helper TabInfo()
{
    <table class="adminContent">
        <tr>
            <td colspan="2">
                <div class="group corner">
                    <div id="ribbon-sample" class="@Model.RibbonClass @Model.RibbonColor"><span id="spanText">@Model.Text</span></div>
                </div>

            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.Name):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </td>
        </tr>

        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.Text):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.Text)
                @Html.ValidationMessageFor(model => model.Text)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.Published):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.Published)
                @Html.ValidationMessageFor(model => model.Published)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.TargetClass):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.TargetClass)
                @Html.ValidationMessageFor(model => model.TargetClass)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.RibbonColor):
            </td>
            <td class="adminData">
                @Html.HiddenFor(model => model.RibbonColor)
                <div id="colorRed" class="lred ribbon-colors"><span>Light red</span></div>
                <div id="colorBlue" class="lblue ribbon-colors"><span>Light blue</span></div>
                <div id="colorGreen" class="lgreen ribbon-colors"><span>Light green</span></div>
                <div id="colorYellow" class="lyellow ribbon-colors"><span>Light yellow</span></div>
                @Html.ValidationMessageFor(model => model.RibbonColor)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.RibbonClass):
            </td>
            <td class="adminData">
                @Html.HiddenFor(model => model.RibbonClass)
                @Html.ValidationMessageFor(model => model.RibbonClass)
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="block1" class="group corner">
                    <div class="wrap-ribbon left-corner lblue"><span>Left Corner Wrap</span></div>
                </div>
                <div id="block2" class="group corner">
                    <div class="wrap-ribbon right-corner lblue"><span>Right Corner Wrap</span></div>
                </div>
                <div id="block3" class="group corner">
                    <div class="wrap-ribbon left-corner strip lblue"><span>Left Corner Wrap</span></div>
                </div>
                <div id="block4" class="group corner">
                    <div class="wrap-ribbon right-corner strip lblue"><span>Right Corner Wrap</span></div>
                </div>
                <div id="block5" class="group edge">
                    <div class="wrap-ribbon left-edge point lblue"><span>Left Edge Wrap</span></div>
                </div>
                <div id="block6" class="group edge">
                    <div class="wrap-ribbon right-edge point lblue"><span>Right Edge Wrap</span></div>
                </div>
                <div id="block7" class="group edge">
                    <div class="wrap-ribbon left-edge point stitch lblue"><span>Left Edge Wrap</span></div>
                </div>
                <div id="block8" class="group edge">
                    <div class="wrap-ribbon right-edge point stitch lblue"><span>Right Edge Wrap</span></div>
                </div>
                <div id="block9" class="group edge">
                    <div class="wrap-ribbon left-edge fork lblue"><span>Left Edge Wrap</span></div>
                </div>
                <div id="block10" class="group edge">
                    <div class="wrap-ribbon right-edge fork lblue"><span>Right Edge Wrap</span></div>
                </div>
                <div id="block11" class="group edge">
                    <div class="wrap-ribbon left-edge fork stitch lblue"><span>Left Edge Wrap</span></div>
                </div>
                <div id="block12" class="group edge">
                    <div class="wrap-ribbon right-edge fork stitch lblue"><span>Right Edge Wrap</span></div>
                </div>

            </td>
        </tr>
    </table>
}
@helper TabProducts()
{
    @Html.Partial("~/Plugins/Widgets.Ribbon/Views/WidgetsRibbon/_CreateOrUpdate.Product.cshtml", Model)
}
